<template>

  <div>

    <el-table :data="tableData">
      <el-table-column
        label="得分大于等于">
        <template v-slot="scope">
          <el-input-number v-model="scope.row.scoreStart" :min="0" :max="999" size="mini"/>
        </template>
      </el-table-column>

      <el-table-column
        label="得分小于等于">
        <template v-slot="scope">
          <el-input-number v-model="scope.row.scoreEnd" :min="0" :max="999" size="mini"/>
        </template>
      </el-table-column>

      <el-table-column
        label="获得积分">
        <template v-slot="scope">
          <el-input-number v-model="scope.row.points" :min="0" :max="9999" size="mini"/>
        </template>
      </el-table-column>

      <el-table-column
        width="100px"
        label="删除">
        <template v-slot="scope">
          <el-button size="mini" circle icon="el-icon-delete" type="danger" @click="remove(scope.$index)"/>
        </template>
      </el-table-column>
    </el-table>

    <el-button style="width: 100%; margin-top: 15px" type="primary" icon="el-icon-plus" size="mini" plain @click="add">添加新的项</el-button>

    <div class="tips-box">
      <div>1.合理设置积分规则，如得分段重合，优先取最高积分；</div>
      <div>2.无需阅卷且有多次考试机会的情况：</div>
      <div class="tips-sub">a)首次交卷后自动发放与分数匹配积分。</div>
      <div class="tips-sub">b)后续交卷仅发放取得更高积分的差额。</div>
      <div>3.需要阅卷或仅1次考试机会的情况：</div>
      <div class="tips-sub">a)发放最后一次考试考试成绩对应的积分。</div>
      <div class="tips-sub">b)需要阅卷的在阅卷完毕后发放。</div>
      <div class="tips-sub">c)无需阅卷的交卷后直接发放。</div>
    </div>

  </div>

</template>

<script>

export default {
  name: 'PointsRule',
  props: {
    value: {
      type: Array,
      default: function() {
        return []
      }
    }
  },

  data() {
    return {
      tableData: []
    }
  },
  watch: {
    // 检测查询变化
    value: {
      handler(val) {
        this.tableData = val
      }
    },
    // 检测查询变化
    tableData: {
      handler(val) {
        this.$emit('input', val)
      }
    }
  },
  created() {
    this.tableData = this.value
  },
  methods: {

    // 添加一行
    add() {
      let scoreStart = 0
      let points = 0

      if (this.tableData.length > 0) {
        for (let i = 0; i<this.tableData.length; i++) {
          if (scoreStart < this.tableData[i].scoreEnd) {
            scoreStart = this.tableData[i].scoreEnd
            points = this.tableData[i].points
          }
        }
      }

      this.tableData.push({ scoreStart: scoreStart, scoreEnd: scoreStart, points: points })
    },

    // 移除一行
    remove(index) {
      this.tableData.splice(index, 1)
    }
  }
}
</script>

